<!-- 1、原本的 IIFE：就一个vue使用立即调用函数返回一个 exports对象 -->
<!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->

<!-- 2、ESM 引入写法：可以去往链接看看，导出了 {xx,xx,xx,xx} -->
<!-- vue.esm-browser.js -->
<!-- esm-browser.js引入的 没有type="module",读取不到东西 -->
<!-- vue的模块配置：
 "main": "index.js",
 "module": "dist/vue.runtime.esm-bundler.js", 
-->

<!-- 服务端Node环境可以用 IIFE的引入方式 -->
<!-- 浏览器里面直接用 ESM -->
<script type="module">
  // 服务端全量引入
  // 1、esm不能使用这个方式导入，因为是 按需导出 export { Basexxx,ref,...,withScopeId }
  // import Vue from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  // const { createApp, ref } = Vue

  // 2、ESM 导出，客户端运行采用 按需引入
  import {createApp, ref} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

<div id="app">{{ message }}</div>
